<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户分页管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <link th:href="@{/css/common.css}" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
            min-height: 100vh;
            padding: 2rem 0;
        }

        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }

        .table {
            margin: 0;
        }

        .table th {
            background: #f8f9fa;
            color: #2c3e50;
            font-weight: 600;
            border-bottom: 2px solid #e9ecef;
        }

        .table td {
            padding: 1rem;
            vertical-align: middle;
            color: #34495e;
        }

        .table-hover tbody tr:hover {
            background-color: rgba(52, 152, 219, 0.05);
            cursor: pointer;
        }

        .action-btns {
            white-space: nowrap;
        }

        .btn-sm {
            padding: 0.5rem 1rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-outline-primary {
            border-width: 2px;
        }

        .btn-outline-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
        }

        .btn-outline-danger {
            border-width: 2px;
        }

        .btn-outline-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
        }

        .btn-success {
            background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
            border: none;
            padding: 0.8rem 1.5rem;
            font-weight: 500;
        }

        .btn-success:hover {
            background: linear-gradient(135deg, #27ae60 0%, #219a52 100%);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(46, 204, 113, 0.3);
        }

        .status-badge {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
            padding: 0.6rem 1.2rem;
            border-radius: 20px;
            font-size: 0.9rem;
            color: #34495e;
            font-weight: 500;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .pagination {
            margin: 0;
        }

        .page-link {
            padding: 0.5rem 1rem;
            color: #3498db;
            border: none;
            margin: 0 2px;
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        .page-link:hover {
            background-color: #3498db;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
        }

        .page-item.disabled .page-link {
            background-color: #f8f9fa;
            color: #95a5a6;
        }

        .text-primary {
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700;
        }

        .input-group-text {
            background: transparent;
            border-color: #e9ecef;
            border-right: none;
            color: #c8c5e6;
        }

        .input-group .form-control {
            border-left: none;
        }

        .input-group:focus-within {
            box-shadow: 0 0 0 0.25rem rgba(108, 92, 231, 0.25);
        }
    </style>
</head>
<body class="bg-light">
    <div class="container-xl">
        <!-- 原有的标题和添加按钮 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="text-primary">用户列表</h2>
            <a th:href="@{/add}" class="btn btn-success">
                <i class="bi bi-person-plus"></i> 添加用户
            </a>
        </div>
        <!-- 修改搜索表单 -->
        <div class="card mb-4">
            <div class="card-body">
                <form th:action="@{/selectByName}" method="get" class="row g-3 align-items-center">
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-text bg-light">
                                <i class="bi bi-search"></i>
                            </span>
                            <input type="text" class="form-control" name="realName" th:value="${searchKeyword}"
                                placeholder="搜索姓名">
                        </div>
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-search me-2"></i>搜索
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="card shadow-sm">
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 80px;">ID</th>
                            <th>账号</th>
                            <th>姓名</th>
                            <th style="width: 150px;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="user : ${page.records}">
                            <td th:text="${user.id}"></td>
                            <td th:text="${user.account}"></td>
                            <td th:text="${user.realName}"></td>
                            <td class="action-btns">
                                <a th:href="@{/selectById(id=${user.id})}" class="btn btn-sm btn-outline-primary">
                                    编辑
                                </a>
                                <a th:href="@{/deleteById(id=${user.id})}" class="btn btn-sm btn-outline-danger ms-2">
                                    删除
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="card-footer d-flex justify-content-between align-items-center">
                <div class="status-badge">
                    共 [[${page.total}]] 条，每页 [[${page.size}]] 条
                </div>
                <nav>
                    <ul class="pagination pagination-sm mb-0">
                        <li class="page-item" th:classappend="${page.current == 1} ? 'disabled'">
                            <a class="page-link" th:href="@{/page(current=1)}">首页</a>
                        </li>
                        <li class="page-item" th:classappend="${page.current <= 1} ? 'disabled'">
                            <a class="page-link" th:href="@{/page(current=${page.current-1})}">上一页</a>
                        </li>
                        <li class="page-item disabled">
                            <span class="page-link text-dark">第 [[${page.current}]] 页</span>
                        </li>
                        <li class="page-item" th:classappend="${page.current >= page.pages} ? 'disabled'">
                            <a class="page-link" th:href="@{/page(current=${page.current+1})}">下一页</a>
                        </li>
                        <li class="page-item" th:classappend="${page.current == page.pages} ? 'disabled'">
                            <a class="page-link" th:href="@{/page(current=${page.pages})}">尾页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>